import React from 'react';
import { connect } from 'react-redux';
import Spin from 'shared/BaseComponents/Spin';
import * as actions from './actions';
import {Pagination} from 'antd';
import {formatDate} from 'shared/utils/func';

// import Tab from 'shared/BaseComponents/Tab';

import './index.less';
/**
 * 标签下拉列表封装
 *
 * @Function SelectFn
 * @extends {Component}
 */
const SelectFn = (props)=>{
    return (
        <select className="form-control w100 c85 f16 ml20" onChange={(e)=>{props.selectHandle(e.target.value)}}>
            <option value="">--请选择--</option>
            {
                props.data.map((item,i)=>
                    <option key={i} value={item.id}>{item.name}</option>
                )
            }
        </select>
    )
}


/**
 * (婚礼方案列表)
 *
 * @class WedList
 * @extends {Component}
 */
 class WedList extends React.Component{

     constructor(props){
        super(props)
        this.state = {
            footItemShow: []
        }
     }

     footItemChange(i){
        console.log(i)
        this.state.footItemShow[i] = !this.state.footItemShow[i]
        this.setState({
            footItemShow: this.state.footItemShow
        })
     }

     render(){
         const { listData } = this.props;
         const { footItemShow } = this.state;
         return(
            <div className="project-list">
                <div className="project-box mt30 center-b-box">
                    {
                        listData.list.map((item,i)=>
                            <div key={i} className="project-item bcf pr">
                                <div className="center-b-box">
                                    <div>
                                        <span className="c6 f16">标题:</span>
                                        <span className="c3 f18">{item.case_title}</span>
                                    </div>
                                    <span className="c6 cp ctrl-more" onClick={()=>this.footItemChange(i)}>...</span>
                                </div>
                                <div className="c6 mt10 f18">
                                    <span>时间:</span>
                                    <span>{formatDate(item.created_at)}</span>
                                </div>
                                <div className="mt10 w100_ h200 br5 pr oh">
                                    <img className="w100_ h100_ " src={item.cover_img} alt="" />
                                </div>
                                <div className="mt10 center-start">
                                    <div className="head-img" >
                                        <img  className="w100_ h100_ " src={item.store_logo} alt="" />
                                    </div>
                                    <span className="ml12 f18">{item.store_name}</span>
                                </div>
                                <div className="center-b-box project-grade">
                                    <div>
                                        <span>收藏:</span>
                                        <span>{item.collect_num}</span>
                                    </div>
                                    <div>
                                        <span>售卖:</span>
                                        <span>{item.sell_num}</span>
                                    </div>
                                    <div>
                                        <span>浏览:</span>
                                        <span>{item.look_num}</span>
                                    </div>
                                    <div>
                                        <span>预约:</span>
                                        <span>{item.reserve_num}</span>
                                    </div>
                                </div>
                                <div>
                                    <span className="f14 c6">退款:</span>
                                    <span className="f16 c3">{item.refund_num}</span>
                                </div>
                                <div className="center-b-box">
                                    {item.tags.split(',').map((tag,i)=>
                                        <span className="cc f16 mr20" key={i}>{'#' + tag}</span>
                                    )}
                                    <div>
                                        <span>￥:</span>
                                        <span className="cf5 f16">{item.price}</span>
                                    </div>
                                </div>

                                <div className={"foot-ctrl center-around " + (footItemShow[i] ? "df" : "hide")}>
                                    <span>删除</span>
                                    <span className="split"></span>
                                    <div>
                                        <span>启用</span>
                                        <span>/</span>
                                        <span>禁用</span>
                                    </div>
                                    <span className="split"></span>
                                    <span>查看详情</span>
                                    <span className="split"></span>
                                    <span>设为推荐</span>
                                </div>
                            </div>
                        )
                    }
                </div>
            </div>
         )
     }
 }

 /**
 * Main
 *
 * @class ProjectManage
 * @extends {Component}
 */
class ProjectManage extends React.Component{
    constructor(props){
        super(props);
        this.tagArr = [18,25,43];
        this.state = {
            tagData:{
                type:[],
                color:[],
                style:[],
            },
            listData:{
                list:[],
                cases:{}
            },
            searchValue:'',
        }
        this.fetchData = {
            is_excel:0,
            order_by:1,
            tag_ids:'18,25,43',
            tag_ids:this.tagArr.join(','),
            page:1,
            type:3
        }
    };



    searchChange = (e)=>{
        this.setState({
            searchValue:e.target.value
        })
    }

    searchList = ()=>{
        const { tagAction,projectAction } = this.props;
        this.fetchData.keyword = this.state.searchValue;
        projectAction(this.fetchData);
    }

    selectTagHandle = (value,type)=>{
        if(type == 'type'){
            this.setState({
            tagArr:this.tagArr.splice(0,1,value)
        })
        }
        if(type == 'style'){
            this.setState({
            tagArr:this.tagArr.splice(1,1,value)
        })
        }
        if(type == 'color'){
            this.setState({
            tagArr:this.tagArr.splice(2,1,value)
        })
        }
    }

    sortSearch = (e)=>{
        this.fetchData.order_by = e.target.value;
    }

    searchRes = ()=>{
        this.fetchData.tag_ids = this.tagArr.join(',');
        const { projectAction } = this.props;
        projectAction(this.fetchData);
        console.log(this.fetchData)
    }

    componentDidMount(){
        const { tagAction,projectAction } = this.props;
        tagAction({});
        projectAction(this.fetchData);
    }

    componentWillReceiveProps({ tagData,projectList }){
        if(tagData.data && projectList.data){
            this.setState({
                tagData:tagData.data,
                listData:projectList.data
            })
        }
    }

    render(){
        const data = this.state.tagData;
        const {listData,searchValue } = this.state;
        return(
        <div className="bear-manage-project">
            <div>
                <div className="center-b-box mt30">
                    <div>
                        <input type="text" className="form-control c85 w440 h40" value={searchValue} onChange={this.searchChange}  placeholder="输入昵称、账号搜索" />
                        <img src={require('../../img/log/yonghuguanli_btn_search.png')} onClick={this.searchList} className="search-img w18 cp" />
                    </div>
                    <button className="excel-btn ml28" ><a href="/">导出excel</a></button>
                </div>
                <div className="center-start mt25">
                    <span>筛选</span>
                    <select className="form-control w250 c85 f16 ml20" onChange={this.sortSearch}>
                        <option value="1">浏览次数从多到少</option>
                        <option value="2">浏览次数从少到多</option>
                        <option value="3">成交量从多到少</option>
                        <option value="4">成交量从少到多</option>
                        <option value="5">最新上传</option>
                        <option value="6">收藏最多</option>
                        <option value="7">购买最多</option>
                        <option value="8">价格从低到高</option>
                        <option value="9">价格从高到低</option>
                        <option value="10">创建时间倒序</option>
                    </select>
                    <span className="ml20">标签</span>
                    <SelectFn data={data.type} selectHandle={(value)=>this.selectTagHandle(value,'type')} />
                    <SelectFn data={data.style} selectHandle={(value)=>this.selectTagHandle(value,'style')}/>
                    <SelectFn data={data.color} selectHandle={(value)=>this.selectTagHandle(value,'color')}/>
                    <button className="bt di h40 w80 ml45" onClick={this.searchRes}>筛选</button>
                </div>
            </div>
            <WedList listData={listData} />
            <div className="center-end pagination">
                <Pagination defaultCurrent={1} defaultPageSize={9} total={data.total} onChange={(p)=>this.pageChange(p)}/>
            </div>
        </div>
        )
    }
}

const mapStateToProps = (state)=>{
    return {
        tagData:state.projectManage.get('tagList'),
        projectList:state.projectManage.get('projectList')
    };
}

export default connect(mapStateToProps, actions)(ProjectManage);